<template>
  <div>
    <!-- 弹出层的头部区域 -->
    <van-nav-bar title="频道管理">
      <template #right>
        <van-icon
          name="cross"
          size="0.37333334rem"
          color="white"
          @click="closePopupFn"
        />
      </template>
    </van-nav-bar>
    <!-- 我的频道 -->
    <div class="my-channel-box">
      <div class="channel-title">
        <span
          >我的频道
          <span class="small-title">
            点击{{ closeBtnShow ? "删除" : "进入" }}频道
          </span>
        </span>
        <!-- 删除的时候的小标 -->
        <span @click="closeBtnFn">{{ closeBtnShow ? "完成" : "编辑" }}</span>
      </div>
      <!-- 我的频道列表 -->
      <!-- van-row是对应的每一行 -->
      <van-row type="flex">
        <!-- van-col 是对应的每一列 -->
        <van-col
          span="6"
          v-for="obj in channelsList"
          :key="obj.id"
          @click="goChannelArticleListFn(obj.id)"
        >
          <div class="channel-item van-hairline--surround">
            {{ obj.name }}
            <!-- 删除的徽标 -->
            <van-badge color="transparent" class="cross-badge">
              <template #content>
                <!--v-show css隐藏的方式 而不是从dom树上删除 性能高 -->
                <van-icon
                 @click.native.stop="delFn(obj.id)"
                  v-show="closeBtnShow && obj.id !== 0"
                  name="cross"
                  class="badge-icon"
                  color="#cfcfcf"
                  size="0.32rem"
                />
              </template>
            </van-badge>
          </div>
        </van-col>
      </van-row>
    </div>

    <!-- 更多频道 -->
    <div class="more-channel-box">
      <div class="channel-title">
        <span>点击添加更多频道：</span>
      </div>
      <!-- 更多频道列表 -->
      <van-row type="flex">
        <van-col
          span="6"
          v-for="obj in unChannelList"
          :key="obj.id"
          @click="addChannelFn(obj)"
        >
          <div class="channel-item van-hairline--surround">{{ obj.name }}</div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { getChannelListAPI, getUserDelChannelApi } from '@/api'
export default {
  data () {
    return {
      allChannelList: [], // 所有频道
      closeBtnShow: false // 编辑时候的小 X 初始值
    }
  },
  // 用户频道所有选择数据
  props: {
    // 1. props 是只读的 重新赋值会报错
    // 2.但是如果 给它添加/push 一个元素 不会报错 但是违反单向数据流,所以影响父亲的还是选用子传父
    channelsList: Array // 用户选择的频道列表
  },
  methods: {
    //  关闭弹出层按钮 X
    closePopupFn () {
      this.$emit('closePopup', false)
      // 关闭弹出层的时候 频道上 X 默认是不显示的
      this.closeBtnShow = false
    },
    // 编辑时候的小 X
    closeBtnFn () {
      // 点击的时候取反
      this.closeBtnShow = !this.closeBtnShow
    },
    // 用户添加选择频道
    addChannelFn (channelObj) {
      // 加判断 点击了编辑按钮才能操作数据
      if (this.closeBtnShow === true) {
        // 传值给父亲 添加频道
        this.$emit('addChannel', channelObj)
      }
    },
    // 删除频道
    async delFn (channelId) {
      // 删除功能添加在频道标签上 且推荐频道不能删除
      if (channelId !== 0) {
        // 调用删除接口
        await getUserDelChannelApi(channelId)
        this.channelsList.forEach((obj, index) => {
        // 确定用户点击删除的是哪个频道
          if (obj.id === channelId) {
            this.channelsList.splice(index, 1)
          }
        })
      }
    },
    // 点击进入对应的文章
    goChannelArticleListFn (channelId) {
      // 编辑状态完成后 才能进入相应的频道
      if (this.closeBtnShow === false) {
        // 点击关闭弹出层
        this.$emit('closePopup', false)
        // 1. 进入到对应的频道文章列表
        // 2. 因为频道id在home主页,所以要传id值过去
        // 3.主页的id和频道列表的名字绑定在一起,所以用v-model的本质,传input事件
        // 4. 让传过去的id正好主页面的 active 一样 既绑定id 又关联了频道名字
        this.$emit('input', channelId)
      }
    }
  },
  // 所有用户选择所有频道
  async created () {
    const res = await getChannelListAPI()
    // 给所有频道列表赋值
    this.allChannelList = res.data.data.channels
    // console.log(res)
  },
  // 计算属性
  computed: {
    // 未选择频道的列表
    // filter 过滤:函数体return的布尔值,决定是否收集当前obj对象到新数组里
    unChannelList () {
      // 1. 筛选所有的频道的数组 再嵌套用户已选择的数组
      // 2. 判断 如果大数组和小数组的id一样 则返回false 否则返回true
      return this.allChannelList.filter((obj) => {
        const index = this.channelsList.findIndex(
          (newObj) => newObj.id === obj.id
        )
        if (index > -1) {
          return false
        } else {
          return true
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.popup-container {
  display: flex;
  flex-direction: column;
}

.pop-header {
  height: 90px;
  background-color: #007bff;
  color: white;
  text-align: center;
  font-size: 14px;
  position: relative;
  .title {
    width: 100%;
    position: absolute;
    bottom: 15px;
  }
}

.pop-body {
  flex: 1;
  overflow: scroll;
  padding: 8px;
  background-color: white;
}

.my-channel-box,
.more-channel-box {
  .channel-title {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    line-height: 28px;
    padding: 0 6px;
  }
}

.channel-item {
  font-size: 12px;
  text-align: center;
  line-height: 36px;
  background-color: #fafafa;
  margin: 5px;
}

/*删除的微标 */
.cross-badge {
  position: absolute;
  right: -3px;
  top: 0;
  border: none;
}

/*提示文字 */
.small-title {
  font-size: 10px;
  color: gray;
}
</style>
